/*
 * @Author: xiaoyan
 * @Date: 2021-11-24 16:46:37
 * @LastEditors: xiaoyan
 * @LastEditTime: 2022-02-10 14:38:58
 * @Description: 
 * @FilePath: \user_auth_front\src\pages\user\components\add.tsx
 */
import { Input, Form,Select,Radio, Row,Col, message } from "antd";
import { useMappedState,useDispatch} from 'redux-react-hook';
import { closeModal } from "@/store/modules/app"
import UploadImg from "@/components/upload";
import store from "@/store";
import { userAdd,userUpdate,userDetail} from "@/api";
import { useEffect, useMemo } from "react";
import SelectOrganizationLists from "@/pages/components/SelectOrganizationLists";
export default ()=>{
    const { Option } = Select;
    const dispatch = useDispatch();
    const [form] = Form.useForm();
    const dialogData:any = store.getState().app.modalConf;
    const id = useMemo(()=>dialogData.data,[dialogData.data]);
    //const organizationLists = useMappedState(state=>state.dictionary.organizationLists);
    
    dialogData.handleOk = form.submit;//设置手动提交事件
    useEffect(()=>{
        if(id) ajaxDetail(id);
    },[id]);
    //请求详情数据
    const ajaxDetail = (id:Number)=>{
        userDetail({id}).then((res:any)=>{
            if(res.code === 0){
                form.setFieldsValue({
                    ...res.data
                });
            }else{
                message.error(res.msg);
            }
        });
    };
    const onFinish = (data:Object)=>{
        handlleSubmit(data).then((res:any)=>{
            if(res.code === 0){
                const modalConf:any = useMappedState(state=>state.app.modalConf);
                if(typeof modalConf.handleBack === "function") {
                    id?modalConf.handleBack() : modalConf.handleBack({page:1});
                }
                dispatch(closeModal());
            }else{
                message.error(res.msg);
            }
        });
    };
    const handlleSubmit = (data:Object)=>{
        if(id){
            return userUpdate({userId:id,...data});
        }else{
            return userAdd(data);
        }
    };
    const formItemLayout = {
        labelCol: { span: 6 },
        wrapperCol: { span: 18 },
    };
    /* const SelectOrganizationLists = organizationLists.map((item:any)=>
        <Option key={item.organizationId} value={item.organizationId}>{item.name}</Option>
    ); */
    return(
        <Form form={form} onFinish={onFinish} {...formItemLayout}>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="用户名：" name="name" rules={[{required: true, message: '请输入用户名'}]}>
                        <Input allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="所属机构：" name="organizationId" rules={[{required: true, message: '请选择所属机构'}]}>
                        <Select style={{ width: "100%" }} allowClear>
                            {SelectOrganizationLists()}
                        </Select>
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="密码：" name="password" rules={[{required: true, message: '请输入密码'}]}>
                        <Input type="password" allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="角色：" name="roleId">
                        <Select style={{ width: "100%" }} allowClear>
                            <Option value="管理员">管理员</Option>
                        </Select>
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="确认密码：" name="password2" rules={[{required: true, message: '请确认密码'}]}>
                        <Input allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="昵称：" name="nickName">
                        <Input allowClear />
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="姓名：" name="chineseName">
                        <Input allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="性别：" name="sex">
                        <Radio.Group>
                            <Radio value={1}>男</Radio>
                            <Radio value={2}>女</Radio>
                        </Radio.Group>
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="身份证号：" name="card">
                        <Input allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="职务：" name="duties">
                        <Input allowClear />
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="手机号：" name="phone">
                        <Input allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="描述：" name="description">
                        <Input allowClear />
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="邮箱：" name="email">
                        <Input allowClear />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="备注1：" name="remark1">
                        <Input allowClear />
                    </Form.Item>
                </Col>
            </Row>
            <Row gutter={24}>
                <Col span={12}>
                    <Form.Item label="头像：" name="avatar">
                        <UploadImg url="https://www.mocky.io/v2/5cc8019d300000980a055e76" />
                    </Form.Item>
                </Col>
                <Col span={12}>
                    <Form.Item label="备注2：" name="remark2">
                        <Input allowClear />
                    </Form.Item>
                </Col>
            </Row>
        </Form>
    );
}